<template>
  <div id="resizeBox" class="editRight posr" :class="rightClass">
<!--    <img src="hhttp://localhost:37511/api/File/ShowFile?fileCode=d502af3f-2067-4a6d-9522-563f6d2a60e1.png" style="max-width:100%;cursor:pointer;vertical-align: middle;" role="999" class="video_fake_img" data-nopop="1" width="360" height="200" crossorigin="">-->
    <div class="smallSearch" >
      <div class="cnkiLayer" v-show="currShowingResoLib !== 'book'" style="height: 100%; overflow: hidden;">
        <div class="bcRcon" style="height: 100%;">
          <cnki-resource v-show="currShowingResoLib === 'cnki'"
                         :containerHeight="viewHeight">
          </cnki-resource>
          <school-resource v-show="currShowingResoLib === 'scho'"
                           v-if="typeId"
                           :show-add='true'
                           :containerHeight="viewHeight"
                           :course-class-id="typeId"
                           @add-school-data='addSchoolData'>
          </school-resource>
          <prep-resource
              v-if="typeId"
              v-show="currShowingResoLib === 'prep'"
              :isAddBtn="true"
              @add-prep-data="addPrepData"
              :containerHeight="viewHeight">
          </prep-resource>
          <!--<personal-resource ></personal-resource>-->
        </div>
      </div>
      <e-book v-show="currShowingResoLib === 'book'"></e-book>
    </div>
    <div class="fzSideBtn">
      <div @click="toggleRightArea('prep')"
            :class="{active: rightBarVisible && currShowingResoLib === 'prep'}" v-if="typeId">备课组资源
        <span class="sqrig">
          <em>收起</em>
        </span>
      </div>
      <div @click="toggleRightArea('scho')" :class="{active: rightBarVisible && currShowingResoLib === 'scho'}"
            v-if="typeId">本校资源
        <span class="sqrig">
          <em>收起</em>
        </span>
      </div>
      <div @click="toggleRightArea('cnki')"
            :class="{active: rightBarVisible && currShowingResoLib === 'cnki'}">知网资源
        <span class="sqrig">
          <em>收起</em>
        </span>
      </div>
      <div @click="toggleRightArea('book')"
            :class="{active: rightBarVisible && currShowingResoLib === 'book'}">仿真书预览
        <span class="sqrig">
          <em>收起</em>
        </span>
      </div>
    </div>
    <div class="drag-btn" id="resizectlr"></div>
  </div>
</template>

<script>
  import {mapState, mapMutations, mapActions} from "vuex";
  import cnkiResource from "./cnkiResource";
  import schoolResource from "./schoolResource";
  import prepResource from './prepResource';
  import eBook from '../eBook/eBook';
  import {throttle} from "../../core/util";
  import eRes from '../../../core/editorRes';
  import {Observer} from '../../core/util'

  let loadingInstance;
  export default {
    components: {
      cnkiResource,
      schoolResource,
      prepResource,
      // personalResource,
      eBook
    },
    mounted() {
      let bookController = document.querySelector(".bookEdit");
      document.querySelector(".smallSearch").onscroll = function () {
        bookController.style.top = this.scrollTop + "px";
      };
    },
    created() {
      this.setViewHeight();
      window.onresize = throttle(() => {
        this.setViewHeight();
      }, 200); // 其实是去抖函数
    },
    data() {
      return {
        typeId: window.typeId, // 课程类型ID
        viewHeight: 0,
        isShowNav: true
      };
    },
    computed: {
      ...mapState(["rightBarVisible", "currShowingResoLib"]),
      rightClass() {
        let classList = [];
        // 右侧可手动伸缩，删去不用的class，20190228
        if (this.rightBarVisible) classList = ["editRightShow"];
        return classList;
      }
    },
    methods: {
      ...mapMutations(["focus", "triggerRightBar", "setCurrShowingResoLib", "fireEBookChange"]),
      ...mapActions(["addCnkiImg", "addSchoolData", "addZJData"]),
      // 右边栏的操作
      toggleRightArea(type) {
        if (this.rightBarVisible) {
          // 右边栏正在显示
          // 如果点击的就是当前展示的库，收起右边栏
          // 如果不是，切换
          if (type === this.currShowingResoLib) {
            this.triggerRightBar(false);
          } else {
            this.setCurrShowingResoLib(type);
          }
        } else {
          // 右边栏关闭状态，打开右边栏，设置当前打开库
          this.triggerRightBar(true);
          this.setCurrShowingResoLib(type);
        }
        this.fireEBookChange();
        this.focus();
      },
      setViewHeight() {
        // 设置阅读区域高度
        this.viewHeight = $(window).height() - 167;
      },
      /**
       * 添加备课组资源
       */
      addPrepData(data){
        let editor = UE.getEditor(window.editorId);
        for (let item of data) {
          if(item.type === "justImg"){
            editor.execCommand("insertmedia", {
              src: item.src,
              describe: item.name,
              type: 'image'
            });
          }else{
            eRes.addResource(item);
          }
        }
      },
      /**
       * 本校资源添加进编辑器
       */
      addSchoolData(data) {
        // console.log(data);
        let editor = UE.getEditor(window.editorId);
        for (let item of data) {
          if(item.type === "justImg"){
            editor.execCommand("insertmedia", {
              src: item.src,
              describe: item.name,
              type: 'image'
            });
          } else if (item.type === "cnkiLink") {
            let link = `<img src="${globalVar.SITEORIGIN}Editor/images/cnkiLinkImg.png" role="999" style="vertical-align: middle;"/><a href="${item.src}" style='font-size:12px; color:#0066cc;' target='_blank'>${item.name}</a><br/>`;
            Observer.fire("insertHtml", link);
          } else{
            eRes.addResource(item);
          }
        }
        //         // 其他资源
        //         let href = "";
        //         if (process.env.NODE_ENV === "development") {
        //           href = `http://192.168.107.77/teacher/#/coReading?CourseCode=${obj.CourseCode}&CourseType=2&ResourceCode=${obj.ResourceCode}&showOne=true`;
        //         } else {
        //           href = `${window.parent.location.origin + window.parent.location.pathname}#/coReading?CourseCode=${obj.CourseCode}&CourseType=2&ResourceCode=${obj.ResourceCode}&showOne=true`;
        //         }
        //         link = `<a href="${href}" style='font-size:12px; color:#0066cc;' target='_blank'>${obj.MaterialName}</a><br/>`;
        //       }
        //       Observer.fire("insertHtml", link);
        //       break;
        //   }
        // }
      },
    },
    mounted(){

    }
  };
</script>

<style>
  @import "./../../../assets/css/cnki.css";

  .smallSearch {
    height: 100%;
    overflow: auto;
  }

  .drag-btn {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -4px;
    width: 8px;
    cursor: w-resize;
    display: none;
  }

  .fzSideBtn > span:hover {
    color: #2a8cd7;
  }
</style>
